//当前项目的路由模块

//1.导入Vue和VueRouter的包
import Vue from "vue"
import VueRouter from "vue-router"

//导入需要的组件
import About from "@/components/About.vue"
import Home from "@/components/Home.vue"
import Movie from "@/components/Movie.vue"
import Tab1 from "@/components/tabs/Tab1.vue"
import Tab2 from "@/components/tabs/Tab2.vue"
import Login from "@/components/Login"
import Main from "@/components/Main"

//2.调用Vue.use()函数，把VueRouter安装为Vue插件
Vue.use(VueRouter)

//3.创建路由的实例对象
const router = new VueRouter({
    //routes是一个数组 作用：调用hash地址和组件之间的对应关系
    routes: [
        //重定向
        {path: '/',redirect: '/home'},
        //路由规则
        {path: '/home',component:Home},
        // {path: '/movie',component:Movie},
        //动态路由
        // {path: '/movie/:id',component:Movie},
        //可以为路由规则开启props传参从而方便拿到动态参数的值
        {path: '/movie/:id',component:Movie,props: true},
        {path: '/about',component:About,
            // redirect: '/about/tab1',
        children:[//1.通过children属性，嵌套声明子级路由规则
            //默认子路由
            {path: '',component: Tab1},
            {path: 'tab1',component: Tab1},//2.访问/about/tab1时，展示Tab1组件
            {path: 'tab2',component: Tab2} //3.访问/about/tab2时，展示Tab2组件

        ]},
        {path: '/login',component: Login},
        {path: '/main',component: Main}
    ]
})
//调用路由实例对象的beforeEach方法，即可声明“全局前置守卫”
//每次发生路由导航跳转的时候，都会自动触发fn这个“回调函数”
//fn参数：
//to:是将要访问的路由的信息对象
//from：是酱油离开的路由的信息对象
//next:是一个函数，调用next()表示放行，允许这次路由导航
router.beforeEach(function (to,from,next) {
    //1.拿到用户要访问的hash地址
    //2.判断hash地址是否等于/main
    //2.1如果等于/main,证明需要登录才能访问
    //2.2如果b不等于/main,，直接next()放行
    //3.如果访问的地址是/main,则需要读取localStorage中的token值
    //3.1如果有token,则放行
    //3.2如果没有token,则强制跳转到/login进行登录
    if (to.path === '/main'){
        const token = localStorage.getItem('token')
        if (token){
            next()
        }else {
            next('/login')
        }
    }else {
        next()
    }
})

//4.向外共享路由的实例对象
export default router